<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动物之家-注册</title>
    <link rel="shortcut icon" href="./images/favicon.ico" />
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="css/forgetpwd.css">
    <!-- <script src=""></script> -->


    <!-- 上传头像插件 -->
    <script src="./js/uploadPictures/jquery-3.4.1.min.js"></script>


</head>

<body>
    <!-- 开始 -->
    <div class="regist">
        <div class="reg-top">
            <a href="index.html">动物之家</a>
            <h5>动物之家-国内最大的宠物领养送养平台</h5>
        </div>
        <div class="choicePhoto">
            <h2>点击图片图片更换头像</h1>
                <div class="ft_img" id="ft_img">
                    <img src="./images/01.png" class="t_img" />
                </div>
                <div class="s_box" id="sbox">
                    <div class="header">
                        <p>设置头像</p>
                        <span class="close" id="close">x</span>
                    </div>
                    <hr width="80%" color="#e0e0eb" />
                    <div id="t_img">
                        <img src="./images/01.png" />
                        <img src="./images/02.png" />
                        <img src="./images/03.png" />
                        <img src="./images/04.png" />
                        <img src="./images/05.png" />
                        <img src="./images/06.png" />
                        <img src="./images/07.png" />
                        <img src="./images/01.png" />
                        <img src="./images/02.png" />
                        <img src="./images/03.png" />
                        <img src="./images/04.png" />
                        <img src="./images/05.png" />
                        <img src="./images/06.png" />
                        <img src="./images/07.png" />
                        <img src="./images/04.png" />
                        <img src="./images/05.png" />
                    </div>
                    <hr width="80%" color="#e0e0eb" />
                    <div class="bt_box">

                        <a class="gb" href="javascript:" id="hide">关闭</a>
                        <a class="queren" href="javascript:" id="but">保存头像</a>
                    </div>
                </div>
        </div>
        <div class="reg-bot">

            <div>
                <input type="text" placeholder="账号"><label class="iconfont icon-ren"></label>
            </div>
            <div>
                <input type="password" placeholder="密码"><label class="iconfont icon-mima"></label>
            </div>
            <div>
                <input type="password" placeholder="确认你的密码"><label class="iconfont icon-mima"></label>
            </div>
            <div>
                <input type="text" placeholder="昵称"><label class="iconfont icon-nicheng"></label>
            </div>
            <div>
                <input type="text" placeholder="邮箱"><label class="iconfont icon-youxiang1"></label>
            </div>
            <div>
                <input type="text" placeholder="手机"><label class="iconfont icon-shouji"></label>
            </div>
            <div>
                <input type="text" placeholder="地址"><label class="iconfont icon-dizhi"></label>
            </div>
            <div class="yanzheng">
                <input type="text" name="" id="" placeholder="请输入验证码"><input type="text" class="exam" disabled>
                <label class="iconfont icon-yanzhengma"></label>
                <a href="#" class="new">刷新</a>
            </div>


            <div>
                <input type="checkbox" value="同意" class="check"> 同意用户协议
            </div>
            <button>注册</button>
            <div class="login clear_fix">
                <span>社交账号注册</span> <i class="icon-icon iconfont i1"></i><i class="icon-weibo-copy iconfont i2"></i><i class="icon-11qq iconfont i3"></i>
                <a href="login.html">用已有账号登录</a>
            </div>
        </div>
    </div>
    <!-- 结束 -->

    <!-- 底部开始 -->
    <div class="fo-top">
        <div class="main fo-main clear_fix">
            <dl>
                <dt>动物之家</dt>
                <dd>
                    <a href="#">关于我们</a>
                </dd>
                <dd>
                    <a href="#">我的简介</a>
                </dd>
                <dd>
                    <a href="#">媒体报道</a>
                </dd>
                <dd>
                    <a href="#">流程介绍</a>
                </dd>
            </dl>
            <dl>
                <dt>产品服务</dt>
                <dd>
                    <a href="#">社区</a>
                </dd>
                <dd>
                    <a href="#">微信公众号</a>
                </dd>
                <dd>
                    <a href="#">微信小程序</a>
                </dd>
                <dd>
                    <a href="#">开发宝</a>
                </dd>
            </dl>
            <dl>
                <dt>帮助</dt>
                <dd>
                    <a href="#">如何关注公众号</a>
                </dd>
                <dd>
                    <a href="#">如何领养宠物</a>
                </dd>
                <dd>
                    <a href="#">如何发布启示</a>
                </dd>
                <dd>
                    <a href="#">查看更多></a>
                </dd>
            </dl>
            <div class="erweima clear_fix">
                <div class="box1">
                    <img src="./images/logo.png" alt="">
                    <span>pet@dwzj.net</span>
                    <em>北京 | 上海 | 广州 | 长沙</em>
                    <p><i class="icon-icon iconfont"></i><i class="icon-weibo-copy iconfont"></i><i class="icon-11qq iconfont"></i></p>
                </div>
                <div class="box2"><img src="./images/erweima.jpg" alt="">
                    <p>加入宠物救助交流群</p>
                </div>
            </div>
        </div>
    </div>
    <div class="fo-bot">
        <div class="main"><img src="./images/logo.png" alt="">
            <span>copyright© 2021 dwzj.net</span></div>
    </div>

    <!-- 底部结束 -->

    <script>
        //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
        /* 隐藏，显现效果 */
        $(".t_img").click(function() {
            $("#sbox").show("slow");
        });
        $("#hide").click(function() {
            $("#sbox").hide("slow");
        });
        $("#close").click(function() {
            $("#sbox").hide("slow");
        });
        /*  选定图像获取图像src值 */
        var $t_img = document.getElementById('t_img');
        var $img = $t_img.getElementsByTagName('img');
        var index = 0;
        for (var i = 0; i < $img.length; i++) {
            $img[i].index = i;
            $img[i].onclick = function() {
                $img[index].style.borderRadius = "15%";
                $img[index].style.border = "none"
                this.style.borderRadius = "50%";
                this.style.border = "1px solid red"
                index = this.index;
                var $newsrc = $img[index].src;
                $(".t_img").attr('src', $newsrc);
            }
        }
        //点击确认修改按钮更换头像
        $("#but").click(function() {
                $("#sbox").hide("slow");
            })
            //创建一个可存取到该file的url  
        function getObjectURL(file) {
            var url = null;
            // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已  
            if (window.createObjectURL != undefined) { // basic  
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)  
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome  
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
    </script>
</body>

</html>